<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue demo09(Class和Style绑定)</title>
    <style>
        .static {
            font-weight: bold;
        }
        .active {
            color: blue;
        }
        .bigSize {
            font-size: 20px;
        }
    </style>
    <script src="../build/vue.js"></script>
</head>
<body>
<div id="app">
    <div>
        <h2>Class绑定</h2>
        <p class="static" v-bind:class="{active: isActive, bigSize:isBig}">Hello world</p>
        <p class="static" :class="classObject">Hello world</p>
    </div>
    <div>
        <h2>Style绑定</h2>
        <p class="static" :style="{color: activeColor, fontSize: bigSizeFont + 'px'}">Hello world</p>
        <p class="static" :style="styleObject">Hello world</p>
    </div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            isActive: true,
            isBig: false,
            classObject: {
                active: false,
                bigSize: true
            },
            activeColor: 'red',
            bigSizeFont: 20,
            styleObject: {
                color: 'red',
                fontSize: '20px'
            }
        }
    });
</script>
</body>
</html>